<template>
	<el-dialog v-model="dialogVisible" title="创建模版" width="65%" :before-close="handleClose">
		<div>
			<el-radio-group v-model="type" size="large">
				<el-radio-button label="0">从公共模板库中选择</el-radio-button>
				<el-radio-button label="1">自行创建</el-radio-button>
			</el-radio-group>

			<div style="display: flex; flex-wrap: wrap" v-if="type == 0">
				<div
					v-for="(item, index) in tableData.data"
					:key="index"
					@click="selectTemplate(item)"
					:class="['template_item', selectTemplateItem.id == item.id ? 'selected' : 'cu']"
				>
					{{ item.id }}
					<el-image :src="item.imgUrl" class="template_img"></el-image>
					<text class="template_name">{{ item.name }}</text>
				</div>
			</div>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleClose">关闭</el-button>
				<el-button type="primary" @click="submit">下一步</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref, watch, reactive } from 'vue';
import { getTemplate } from '/@/api/api';
import { useRouter } from 'vue-router';
const router = useRouter();

const type = ref(0);
const form = ref({});
const selectTemplateItem = ref({});

const props = defineProps({
	// 列表内容
	dialogVisible: {
		type: Boolean,
		default: () => false,
	},
	row: {
		type: Object,
		default: () => {},
	},
	isAdd: {
		type: Boolean,
		default: () => true,
	},
});

const dialogVisible = ref(false);

watch(
	() => props.dialogVisible,
	(val) => {
		dialogVisible.value = val;
		getAllTemplate();
	}
);

const tableData = reactive({
	data: [],
	total: 0,
	page: 1,
	size: 20,
});

function selectTemplate(item) {
	console.log('🚀 ~ file: typeChoose.vue:73 ~ selectTemplate ~ item:', item);
	selectTemplateItem.value = item;
}

async function getAllTemplate() {
	let par = {
		page: tableData.page,
		size: tableData.size,
		// ...queryFrom.value,
	};

	let { code, data } = await getTemplate(par);
	if (code == 200) {
		tableData.data = data.list;
		tableData.total = data.total;
		// tableLoading.value = false;
	}
}

const emit = defineEmits(['handleClose']);
function handleClose() {
	emit('handleClose');
}

function submit() {
	selectTemplateItem.value.id = null;
	router.push({
		path: '/buildPage',
		query: {
			...selectTemplateItem.value,
			site: 1,
		},
	});
}
</script>

<style lang="scss" scoped>
.template_item {
	position: relative;
	margin-right: 30px;
	margin-top: 30px;
	border-radius: 10px;
}

.template_img {
	width: 160px;
	height: 280px;
	border-radius: 10px;
}

.template_name {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 999;
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
	width: 100%;
	background-color: rgba($color: #000000, $alpha: 0.5);
	color: #fff;
	font-size: 14px;
	height: 30px;
	display: flex;
	padding-left: 5px;
	align-items: center;
}
.selected {
	border: 4px solid #425efd;
}

.cu {
	border: 4px solid #ccc;
}
</style>
